<!-- eslint-disable prettier/prettier -->
<!-- 登录页面 => 登录组件 -->
<template>
  <div class="login-comp">
    <div class="contianer">
      <!-- <h1>三组牛逼</h1> -->
      <div class="logo-box">
        <img src="@/assets/logo.png" alt="" />
        <span>商城后台管理系统</span>
      </div>
      <!-- 表单 -->
      <div class="username">
        <el-input
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
          v-model="fromData.username"
        >
        </el-input>
      </div>
      <div class="password">
        <el-input
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          v-model="fromData.password"
          show-password
        >
        </el-input>
      </div>
      <div class="register-link">
        <el-link type="primary" @click="handleRegister">注册用户</el-link>
      </div>
      <div class="login-btn center" v-loading="loading" @click="handleLogin"> 
        登 录
      </div>
      <div class="title-app">第三方快捷登录</div>
      <div class="applogin">
        <img src="@/assets/wechat.png" alt="" />
        <img src="@/assets/qq.png" alt="" />
        <img src="@/assets/weibo.png" alt="" />
      </div>
      <div class="title-footer">登录注册代表您已阅读并同意《服务协议》</div>
    </div>
  </div>
</template>
<!-- eslint-disable prettier/prettier -->
<script>
// 引入登录接口
import { login } from "@/api/user";
// import { mapMutations } from "vuex";
export default {
  name: "LoginComp",
  components: {},

  data() {
    return {
      fromData: {
        username: "",
        password: "",
      },
      loading: false,

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 6, message: "用户名必须大于6个字符", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    // ...mapMutations(["updateUserInfo"]),
    handleRegister() {
      // 跳转到 注册用户 组件上 - Register
      this.$emit("toggleComponet", "RegisterComp");
    },
    handleLogin() {
      if (this.loading) {
        // 即 若 loading 的时候，不能直接 下面的代码
        // 避免，重复调用接口
        return;
      }

      //   this.loading = true;

      login({
        adminname: this.fromData.username,
        password: this.fromData.password,
        // role: this.ruleForm.role
      }).then((res) => {
        console.log("登录的res", res);
        if (res.code === "200") {
          // console.log(res.data);

          // 用户数据传给vuex
          this.$store.commit("userinfoData/updateUserInfo", res.data);

          this.$message.success("登录成功");

          // 成功登录后跳转到首页
          this.$router.push("/home");
        }
      });
    },
  },
  mounted() {},
};
</script>
<!-- eslint-disable prettier/prettier -->
<style scoped lang="scss">
* {
  user-select: none;
}
.login-comp {
  width: 800px;
  height: 500px;
  background: url("@/assets/login.png") no-repeat;
  background-size: 100% 100%;
  position: relative;

  .contianer {
    box-sizing: border-box;
    height: 400px;
    width: 340px;
    padding: 0 10px;
    // background-color: pink;
    position: absolute;
    right: 20px;
    top: 40px;
    .title-app {
      text-align: center;
    }
    .logo-box {
      box-sizing: border-box;
      width: 100%;
      height: 60px;
      padding: 10px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #090075;

      img {
        height: 100%;
      }
    }
    h1 {
      margin: 30px 0px;
      font-size: 20px;
      color: #090075;
    }
    & > div {
      margin-bottom: 15px;
    }

    .login-btn {
      height: 40px;
      border-radius: 20px;
      background: linear-gradient(to right, #c236bd, #6d02c0, #6900bf);
      color: white;
      user-select: none;
      cursor: pointer;
    }
    .login-btn:hover {
      opacity: 0.9;
    }
    .register-link {
      display: flex;
      justify-content: flex-start;
      a {
        font-size: 12px;
      }
    }
    .title-app {
      font-size: 12px;
      color: #999;
    }
    .applogin {
      margin-top: 20px;
      height: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      img {
        height: 100%;
        cursor: pointer;
      }
    }
    .title-footer {
      margin-top: 30px;
      font-size: 12px;
      color: #888;
      text-align: center;
    }
  }
}
</style>
